import React from 'react';
import { Tooltip } from 'antd';
//@ts-ignore
import { QuestionCircleOutlined } from '#/utils/antdIcons';
import styles from './index.less';

interface IProps {
  /**
   * 提示语
   */
  hintText?: string;
  /**
   * 标题
   */
  title?: string;
  /**
   * 副标题
   */
  subTitle?: string;
}

const ExplainTitle = (props: IProps) => {
  const { hintText = '', title = '', subTitle = '' } = props;
  return (
    <div className={styles.container}>
      <div className="tianji-explain-title-container">
        <div className="tianji-explain-title-content">
          <span className="tianji-explain-main-title">{title}</span>
          {subTitle && <span className="tianji-explain-sub-title">{subTitle}</span>}
          {hintText && (
            <Tooltip placement="topLeft" title={hintText}>
              <span className="tianji-explain-hint-text">
                <QuestionCircleOutlined className="tianji-explain-hint-logo" />
              </span>
            </Tooltip>
          )}
        </div>
      </div>
    </div>
  );
};

export default ExplainTitle;
